<script lang="ts" setup>
import { onBeforeUnmount, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';

import deviceview from './module/deviceview.vue';
import monitorview from './module/monitorview.vue';
import { getAirportById } from '#/api/daping/airport';

const getImageUrl = (name: string) => {
  return new URL(`../../../../assets/${name}`, import.meta.url).href
}
const router = useRouter();
const route = useRoute();
let airport_id;
let airport_info = ref({});
let airport_loading = ref(false)
const get_info = async () => {
  airport_loading.value = true
  try {
    const { data } = await getAirportById({ id: airport_id });
    airport_loading.value = false;
    // airport_info.value = data;
    Object.assign(airport_info.value, data)
  } catch (err) {
    console.log(err)
    airport_loading.value = false
    ElMessage.error('加载数据失败');
  }
}
let getAirportByIdInterval
if (route.query.id) {
  airport_id = route.query.id
  get_info();
  getAirportByIdInterval = setInterval(async () => {
    const { data } = await getAirportById({ id: airport_id });
    Object.assign(airport_info.value, data)
  }, 2000);
}


const changeViewId = ref(1);
const droneList = ref([
  {
    num: '1',
    Id: '大奖机场2',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
]);
const deviceList = ref([
  {
    num: '1',
    Id: '大奖机场 2',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '2024年12月2日 14:24:33',
    status: '已连接',
  },
  {
    num: '1',
    Id: '大奖机场 2',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '2024年12月2日 14:24:33',
    status: '已连接',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '2024年12月2日 14:24:33',
    status: '已连接',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
]);
// 同样，这里的 url 也可以使用以 http 开头的外部链接
const weatherData = ref({
  id: 1,
  temperature: '26°C',
  address: '唐山市路北区韩国南路',
  list: [
    {
      messsage: '42%',
      type: '湿度',
      // icon: '../../../assets/flaybg17.png',
      icon: getImageUrl('flaybg17.png'),
    },
    {
      messsage: '3.2mm',
      type: '降水量',
      // icon: '../../../assets/flaybg17.png',
      icon: new URL(`../../../../assets/flaybg17.png`, import.meta.url).href,

    },
    {
      messsage: '西南风',
      type: '风向',
      // icon: '../../../assets/flaybg15.png',
      icon: new URL(`../../../../assets/flaybg15.png`, import.meta.url).href,

    },
    {
      messsage: '4m/s',
      type: '风速',
      // icon: '../../../assets/flaybg15.png',
      icon: new URL(`../../../../assets/flaybg15.png`, import.meta.url).href,

    },
  ],
});
const cabinData = ref({
  id: 1,
  name: '大疆机场2',
  status: '设备空闲中',
  address: '卫国路路警务站',
  list: [
    {
      messsage: '42°C',
      // icon: '../../../assets/flaybg17.png',
      icon: new URL(`../../../../assets/flaybg17.png`, import.meta.url).href,
      type: '机舱温度',
    },
    {
      messsage: '12kb/s',
      // icon: '../../../assets/flaybg17.png',
      icon: new URL(`../../../../assets/flaybg17.png`, import.meta.url).href,
      type: '网络链接',
    },
    {
      messsage: '正常',
      // icon: '../../../assets/flaybg15.png',
      icon: new URL(`../../../../assets/flaybg15.png`, import.meta.url).href,
      type: '机场电源',
    },
    {
      messsage: '82%',
      status: '充电中',
      // icon: '../../../assets/flaybg15.png',
      icon: new URL(`../../../../assets/flaybg15.png`, import.meta.url).href,
      type: '无人机电量',
    },
  ],
});
const airportData = ref({
  id: 1,
  temperature: '26°C',
  address: '唐山市路北区韩国南路',
});

const getchangeView = (item) => {
  changeViewId.value = item;
};
const backbage = () => {
  // router.go(-1)
  smartNavigate()
}
const smartNavigate = (fallbackPath = '/airportdeployment') => {
  if (window.history.state.back) {
    router.go(-1);
  } else {
    router.replace(fallbackPath);
  }
};
onBeforeUnmount(() => {
  clearInterval(getAirportByIdInterval)
})


const view_type = ref(true)
const switch_view_type = () => {
  view_type.value = !view_type.value
}
</script>
<template>
  <div class="control-management">
    <!-- <h3 class="control-header">中国联通无人机平台</h3> -->
    <div class="air" v-loading="airport_loading">
      <div class="air-top" v-if="!airport_loading" :class="{ 'air-top-height-s': !view_type }">
        <monitorview :airport-data="airport_info" :loading="airport_loading" />
      </div>
      <div class="air-bottom" v-if="!airport_loading" :class="{ 'air-bottom-height-s': !view_type }">
        <div class="air-bottom-content-box">
          <div class="air-bottom-content">
            <deviceview :weather-data="weatherData" :cabin-data="cabinData" :airport-data="airport_info"
              @change-view="getchangeView" />
          </div>
        </div>
        <div class="tab_button" @click="switch_view_type">
          <ArrowDownBold class="icon" v-show="view_type" />
          <ArrowUpBold class="icon" v-show="!view_type" />
        </div>
      </div>
    </div>
    <div class="back-button" @click="backbage"></div>
  </div>
</template>

<style lang="scss" scoped>
.control-management {
  width: 100%;
  height: calc(92vh);
  padding: 0;
  padding-top: 4vh;
  // background: #929292;
  background-image: url('../../../../assets/jcbs_bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;

  // background-image: url('../../../assets/u5962.jpg');
  //   background-repeat: no-repeat;
  //   background-size: 100%;
  .back-button {
    position: absolute;
    top: 0.5vh;
    right: 1vh;
    width: 12vh;
    // height: 26px;
    height: 4vh;
    background-image: url('../../../../assets/back.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    cursor: pointer;
  }
}

.air {
  width: 100%;
  height: 100%;

  .air-top {
    height: 65%;
    transition: height 0.6s ease-out;
  }

  .air-top-height-s {
    height: 100%;
  }

  .air-bottom {
    height: 35%;
    position: relative;
    transition: height 0.6s ease-out;

    .tab_button {
      position: absolute;
      top: -3vh;
      height: 3vh;
      width: 10vh;
      right: 2vh;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #02393e;
      border-top-right-radius: 1vh;
      border-top-left-radius: 1vh;
      cursor: pointer;

      .icon {
        width: 2vh;
      }
    }

    .air-bottom-content-box {
      height: 100%;
      overflow: hidden;

      .air-bottom-content {
        height: 31vh;
        overflow: hidden;
      }
    }

  }

  .air-bottom-height-s {
    height: 0;
  }
}
</style>
